<template>
  <div>
    <div>
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="活动时间" required>
                <el-col :span="11">
                  <el-form-item prop="daydata">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.daydata"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitFormHoliday('ruleForm')"
                  >添加节假日</el-button
                >
                <el-button type="primary" @click="submitFormWorkday('ruleForm')"
                  >添加特殊工作日</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content bg-purple">
            <div>
              <div><span>节假日</span></div>
              <div>
                <div v-for="(item, index) in holidayTable" :key="index"
                  > <span>{{ item.StaHolday }}</span> 
                  <el-button type="text" class="el-icon-close"
                    @click="DelHoliDay(item.HoldayId)"></el-button>
                </div>
              </div>
            </div></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple-light">
            <div>
              <div><span>特殊工作日</span></div>
              <div>
                <div v-for="(item, index) in workdayTable" :key="index">
                  <span>{{ item.StaWorkday }}</span>
                  <el-button type="text" class="el-icon-close"
                    @click="DelWorkDay(item.WorkdayId)"></el-button>
                </div>
              </div>
            </div></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      holidayTable: [],
      workdayTable: [],
      years: "",
      ruleForm: {
        daydata: "",
      },
      Holidaydata: {},
      Workdaydata: {},
      rules: {
        daydata: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    //获取节假日
    Getholiday() {
      this.$http
        .get(
          `Attendance/Showholday?year=${this.years}`
        )
        .then((res) => {
          this.holidayTable = res.data;
        });
    },
    //获取特殊工作日
    Getworkday() {
      this.$http
        .get(
          `Attendance/ShowWorkDay?year=${this.years}`
        )
        .then((res) => {
          this.workdayTable = res.data;
        });
    },
    //添加节假日
    submitFormHoliday(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.Holidaydata.holday = this.ruleForm.daydata;
          this.$http
            .post(`Attendance/AddHolday`, this.Holidaydata)
            .then((res) => {
              if (res.data > 0) {
                alert("添加成功");
                this.Getholiday();
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加特殊工作日
    submitFormWorkday(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.Workdaydata.workday = this.ruleForm.daydata;
          this.$http
            .post(`Attendance/AddWorkDay`, this.Workdaydata)
            .then((res) => {
              if (res.data > 0) {
                alert("添加成功");
                this.Getworkday();
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除特殊工作日
    DelHoliDay(id) {
      console.log(id)
      this.$http
        .get(
          `Attendance/DelHoliday?holidayID=${id}`
        )
        .then((res) => {
          if (res.data > 0) {
            this.Getholiday();
          }
        });
    },
    //删除特殊工作日
    DelWorkDay(id) {
      this.$http
        .get(
          `Attendance/DelWorkDay?workdayID=${id}`
        )
        .then((res) => {
          if (res.data > 0) {
            this.Getworkday();
          }
        });
    },
  },
  created() {
    this.Getholiday();
    this.Getworkday();
  },
};
</script>

<style>
</style>